/**
* @Author: 李晨光
* @Date: 2019/12/4
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/4
**/
<comment>
  # 组件注释
</comment>
<template>
  <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="open" v-if="open">
    <mu-appbar color="primary" class="lan-header">
      <slot name='dialog-header'>
        <mu-button icon slot="left" @click="closeFullscreenDialog">
          <i class="iconfont angle-left iconangle-left "></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        {{title}}
      </slot>
    </mu-appbar>
    <div v-if="open">
      <slot name='dialog-content'></slot>
    </div>
  </mu-dialog>
</template>

<script>

  export default {
    name: 'Dialog',
    components: {},
    props: {
      // 标题
      title: {
        type: String,
        default: 'Pop'
      },
      // 打开关闭状态
      open: {
        type: Boolean,
        default: false
      },
      backType: {
        type: String,
        default: 'close'
      }
    },
    data() {
      return {}
    },
    computed: {},
    created() {
    },
    mounted() {
    },
    watch: {},
    methods: {
      // 打开
      openFullscreenDialog() {
        // this.openFullscreen = true;

        this.$emit('open', true)
      },
      // 关闭
      closeFullscreenDialog() {
        if(this.backType == 'close') {
          this.$emit('close', false)
        }
        // this.openFullscreen = false;

      }
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
  .mu-dialog {
    background: rgba(248, 248, 248, 1);
  }
</style>
